package com.example.nick.bodyapplication.compose

import android.graphics.Paint
import android.graphics.RectF
import android.util.Log
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.NativeCanvas
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.example.nick.bodyapplication.R
import com.example.nick.bodyapplication.compose.style.colorMkThumb

@Preview
@Composable
fun PageSecond() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(androidx.compose.ui.graphics.Color.Green)
    ) {
        Text(
            text = "这里是跳转第2个界面",
            modifier = Modifier
                .background(color = androidx.compose.ui.graphics.Color.Blue)
                .size(Dp(80f))
        )
        Checkbox(
            checked = true,
            onCheckedChange = null,
            modifier = Modifier.background(color = colorMkThumb),
            enabled = true,
            interactionSource = remember { MutableInteractionSource() },
            colors = CheckboxDefaults.colors()
        )
        Switch(
            checked = true,
            onCheckedChange = null,
            modifier = Modifier.width(48.dp),
            enabled = true,
            interactionSource = remember { MutableInteractionSource() },
            //Color(0xFF0000FF)
            colors = SwitchDefaults.colors(
                checkedThumbColor = colorMkThumb,          //启用和选中时用于拇指的颜色
//                        checkedTrackColor = colorMkTrack,             //启用和选中时用于轨道的颜色
//                        checkedTrackAlpha = 1.0f,
//                        uncheckedThumbColor = Color(R.color.mk_track_off),
//                        uncheckedTrackColor = Color(R.color.mk_track_black),
//                        uncheckedTrackAlpha = 1.0f
            )
        )
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun PageView(viewModel: MkViewModel) {
    Box(modifier = Modifier.fillMaxSize()) {
        RemoteControlView(viewModel)
        AnimatedVisibility(visible = viewModel.currentChat) {
            PageSecond()
        }
    }
}


@Composable
fun RemoteControlView(viewModel: MkViewModel) {
    var temperature by remember { mutableStateOf(16) }
    Column(modifier = Modifier.fillMaxSize()) {
        TemperatureView(temperature)
        Row(
            modifier = Modifier
                .align(alignment = Alignment.CenterHorizontally)
                .height(Dp(56f))
        ) {
            Image(
                painter = painterResource(id = R.drawable.arrow_left),
                modifier = Modifier
                    .width(Dp(64f))
                    .padding(end = Dp(24f))
                    .background(color = androidx.compose.ui.graphics.Color.Green)
                    .fillMaxHeight()
                    .align(alignment = Alignment.CenterVertically)
                    .clickable {
                        if (temperature <= 13) {
                            temperature = 13
                        } else {
                            temperature--
                        }
                    },
                contentDescription = null
            )
            TextButton(
                onClick = {
                    viewModel.doSomethings(temperature)
                    Log.i("Compose", "Compose temperature:$temperature")
                },
                modifier = Modifier
                    .width(Dp(240f))
                    .background(color = androidx.compose.ui.graphics.Color.Blue)
                    .align(alignment = Alignment.CenterVertically)
            ) {
                Text(
                    text = "好用，用这个 ${viewModel.curDoSomethings}",
                    color = androidx.compose.ui.graphics.Color.White
                )
            }
            Image(
                painter = painterResource(id = R.drawable.arrow_right),
                modifier = Modifier
                    .width(Dp(64f))
                    .background(color = androidx.compose.ui.graphics.Color.Green)
                    .fillMaxHeight()
                    .padding(start = Dp(24f))
                    .align(alignment = Alignment.CenterVertically)
                    .clickable {
                        if (temperature >= 39) {
                            temperature = 39
                        } else {
                            temperature++
                        }
                    },
                contentDescription = null
            )
        }
    }
}

@Composable
fun TemperatureView(temperature: Int) {
    val imageBitmap = ImageBitmap.imageResource(id = R.drawable.airconditioner_circle)
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .height(Dp(260f))
    ) {
        val canvasWidth = size.width
        val canvasHeight = size.height

        val cX = canvasWidth / 2 - imageBitmap.width / 2
        val cY = canvasHeight / 2 - imageBitmap.height / 2
        drawBg(this, imageBitmap, cX.toInt(), cY.toInt())

        val bgRectPaint = Paint().let {
            it.apply {
                style = Paint.Style.FILL
                color = android.graphics.Color.TRANSPARENT
            }
        }
        val rectF = RectF(0f, 0f, canvasWidth, canvasHeight)
        drawContext.canvas.nativeCanvas.drawRect(rectF, bgRectPaint)
        val textPaint = Paint().let {
            it.apply {
                textSize = 108.dp.value
                color = android.graphics.Color.RED
                textAlign = Paint.Align.CENTER
            }
        }
        val fontMetrics = textPaint.fontMetrics
        val distance = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom
        val baseline = rectF.centerY() + distance
        drawContext.canvas.nativeCanvas.drawText(
            "$temperature",
            rectF.centerX(),
            baseline,
            textPaint
        )
        drawClockScale(
            drawContext.canvas.nativeCanvas,
            canvasWidth,
            canvasHeight,
            imageBitmap.width / 2f,
            textPaint,
            temperature - 13
        )
//        drawLine(
//            start = Offset(x = canvasWidth / 2, y = canvasHeight / 2),
//            end = Offset(x = 0f, y = canvasHeight),
//            color = androidx.compose.ui.graphics.Color.Blue
//        )
    }
}

fun drawBg(drawScope: DrawScope, imageBitmap: ImageBitmap, cX: Int, cY: Int) {
    drawScope.apply {
        drawImage(
            imageBitmap,
            srcOffset = IntOffset.Zero,
            srcSize = IntSize(imageBitmap.width, imageBitmap.height),
            dstOffset = IntOffset(cX, cY),
            dstSize = IntSize(imageBitmap.width, imageBitmap.height)
        )
    }
}

fun drawClockScale(
    canvas: NativeCanvas,
    w: Float,
    h: Float,
    radius: Float,
    paint: android.graphics.Paint,
    inDe: Int
) {
    //先保存一下当前画布的状态，因为后面画布会进行旋转操作，而在绘制完刻度后，需要恢复画布状态
    canvas.save();
    //计算12点处刻度的开始坐标
    val startX = w / 2
    val startY = h / 2 - radius//y坐标即园中心点的y坐标-半径
    //计算12点处的结束坐标
    val stopX = startX;
    val stopY1 = startY + 30;//整点处的线长度为30
    val stopY2 = startY + 15;//非整点处的线长度为15
    //计算画布每次旋转的角度
    val degree = 360f / 40
    canvas.rotate(-90f - 3 * 9f, w / 2, h / 2)//以圆中心进行旋转
    for (i in 0 until 27) {
        if (i <= inDe) {
            if (i % 10 == 3) {
                canvas.drawLine(startX, startY, stopX, stopY1, paint);//绘制整点长的刻度
            } else {
                canvas.drawLine(startX, startY, stopX, stopY2, paint);//绘制非整点处短的刻度
            }
        }
        canvas.rotate(degree, w / 2, h / 2);//以圆中心进行旋转
    }
    //绘制完后，记得把画布状态复原
    canvas.restore();
}